/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Table, TableBody, TableRow, CCell, Text, useTheme, Button, Cell,
} from "customize-easy-ui-component";
import {DirectLink, } from "../../../routing/Link";
import { ReportViewProps, } from "../../common/base";
import {
    末尾链接,
} from "../../common/rarelyVary";
import {
    报告设备详情,
} from "./repView";
import queryString from "query-string";
import RoutingContext from "../../../routing/RoutingContext";
import {useContext} from "react";
import Img_Seal from "../../../images/seal.png";
import {multilines2Html} from "../../tools";
import {ReportFirstPageHeadCyMa} from "../rarelyVary";
import {AttachInspectItemsVw} from "../../vessel/Annual/viewItem";
import {ConclusionValvVw} from "./viewRes";

export const ReportView: React.FunctionComponent<ReportViewProps> = ({
repId,  source: orc,  verId,rep,
}) => {
    const qs= queryString.parse(window.location.search);
    const formatOriginal =qs && !!qs.original;      //改成  格式化版原始记录
    const { history } = useContext(RoutingContext);
    const Component= OfficialReport;            //formatOriginal? FormatOriginal :
    return (<>
        <Component  source={orc} verId={verId} repId={repId} rep={rep}/>
        <div css={{"@media not print": {margin: '0.5rem',}, "@media print": {display: 'none'} }} >
            <Button intent="danger" variant="outline"
                  onPress={async () => {
                      qs.original =formatOriginal? '' : '1';
                      history.location.search = queryString.stringify(qs);
                      const toUrl= history.createHref(history.location);
                      history.push(toUrl);
                  }}>{formatOriginal? '正式报告':'格式化版原始记录'}
            </Button>
        </div>
    </>);
}

/**证书打印样例：只能输出一张的报告。
 * */
const OfficialReport: React.FunctionComponent<ReportViewProps> = ({
    repId,   source: orc,  verId,rep,
}) => {
    const theme= useTheme();
   return (
    <React.Fragment>
      <div css={{
            "@media not print": {
              marginTop:'1rem',
              marginBottom: '1rem'
            },
          }}>
       <div css={{
           "@media print": {
               height:'100vh',       //一张纸的高度！同时配合 pageBreakAfter: 'always', 来约束特定纸张大小；
               overflowY: 'hidden',     //只想打印一页的情形！！ 纸张规格；假如实际的数据超出自然不打印的！ 不加上打印重叠的；
           } }}>
            { ReportFirstPageHeadCyMa({theme,rep, mbbm:'FJB/TM-1007-1-0-2022'}) }
           <div css={{
               "@media print": {
                   display: 'flex',
                   flexDirection: 'column',
                   justifyContent: 'space-around',
                   height: 'calc(100vh - 5rem)',     //剪掉上面头部的高度
               }
           }}>
               <Text variant="h3" css={{
                   textAlign:'center',
                   "@media print": {
                       fontSize: theme.fontSizes[5],
                       // marginTop: '1.5rem',
                   },
               }}>
                安全阀离线校验报告
               </Text>
               <div>
                   <div css={{display: 'flex',justifyContent: 'space-between',}}>
                       安全阀出厂编号：{rep.isp?.no}
                       <Text css={{display: 'flex',flexDirection: 'row-reverse',marginRight: '2rem'
                       }}>报告编号：{rep.isp?.no}</Text>
                   </div>
                   {报告设备详情({orc, repId:repId!, verId,rep})}

                   <ConclusionValvVw orc={orc} rep={rep}/>
               </div>
           </div>
       </div>   {/*这才是height:'100vh'的结束位置，底下另外一页纸张的，可能被上面这一页覆盖了，尾pageBreakAfter:'always'下页pageBreakBefore: 'always',也没法保证不重叠*/}

      </div>
      {末尾链接({template:'VALV-OF',verId, repId: repId||''})}
    </React.Fragment>
  );
}


/*注意：若尾巴加了这个会导致尾随1张空白页，打印怎么都去不掉了!
<div css={{
   textAlign:'center',
   "@media print": {
       pageBreakAfter:'always',
       pageBreakInside:'avoid'
   }
}}>
</div>
* */
